@import "dropdown-icons";

$grapher-dropdown-hover-fill: $gray-10;
$grapher-dropdown-active-fill: $blue-20;
$grapher-dropdown-selected-fill: #c7ced7;

.grapher-dropdown {
    position: relative;
    font: 400 13px/16px $sans-serif-font-stack;

    // fixes a bug in Firefox where long labels would cause the dropdown to resize,
    // see https://github.com/JedWatson/react-select/issues/5170
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    .clear-indicator {
        padding-right: 10px;
        position: absolute;
        right: 29px; // Leave space for the dropdown caret
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border-right: 1px solid #dadada;
        background: none;
        display: flex;
        align-items: center;
        z-index: 1;
        height: calc(100% - 12px);

        &::after {
            content: " ";
            background: url($clear) no-repeat center;
            width: 12px;
            height: 12px;
        }

        &:hover::after {
            background-image: url($clear-hover);
        }
    }

    .control {
        min-height: auto;
        font: 400 13px/16px $sans-serif-font-stack;
        letter-spacing: 0.01em;
        text-align: left;
        display: flex;
        align-items: center;
        border: 1px solid $gray-20;
        border-radius: 4px;
        padding: 7px;
        color: $dark-text;
        background: white;
        cursor: pointer;
        position: relative;
        width: 100%;

        &:focus-visible {
            // Override global focus-visible style.
            outline: 1px solid $blue-30;
            outline-offset: -1px;
        }

        &:hover {
            background: $grapher-dropdown-hover-fill;
        }

        &[data-disabled] {
            opacity: 0.75;
            cursor: default;
            background: $gray-10;
        }

        &:after {
            content: " ";
            background: url($menu-caret-down) no-repeat center;
            width: 16px;
            height: 16px;
            margin-left: auto;
        }

        &.loading:after {
            opacity: 0.5;
        }

        &[data-pressed] {
            border-color: $blue-30;
            &:after {
                background: url($menu-caret-up) no-repeat center;
            }
        }

        .label {
            color: $gray-60;

            svg {
                margin-left: 1px;
                margin-right: 5px;
            }
        }
    }

    .select-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;

        &[data-placeholder] {
            color: $gray-60;
            white-space: nowrap;
        }
    }
}

.grapher-dropdown-listbox {
    max-height: 400px;
    overflow-y: auto;

    &:focus-visible {
        // Override global focus-visible style.
        outline: none;
    }
}

.grapher-dropdown-menu {
    $option-checkmark: "";
    $option-checkmark-width: 12px;
    font: 400 13px/16px $sans-serif-font-stack;

    margin-top: 3px;
    border-radius: 4px;
    background: white;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
    z-index: $zindex-controls-popup;
    color: $dark-text;
    width: var(--trigger-width);
    overflow-y: hidden;

    .group-heading {
        @include grapher_h5-black-caps;
        font-size: 11px;
        color: $light-text;
        margin: 12px 8px 2px 8px;
        font-weight: 700;
    }

    .group + .group .group-heading {
        margin-top: 8px;
        padding: 12px 0 2px 0;
        border-top: 1px solid #f2f2f2;
    }

    .option {
        padding: 10px calc(16px + $option-checkmark-width + 2px) 10px 16px;
        cursor: pointer;

        &[data-hovered],
        &[data-focused] {
            background: $grapher-dropdown-hover-fill;
        }

        &:focus-visible {
            // Override global focus-visible style.
            outline: none !important;
        }

        &[data-pressed] {
            color: $active-text;
            background: $grapher-dropdown-active-fill;
        }

        &[data-selected] {
            position: relative;
            color: $active-text;
            background: $grapher-dropdown-active-fill;

            &:hover {
                background: $grapher-dropdown-selected-fill;
            }

            &:after {
                content: " ";
                background: url($option-checkmark) no-repeat;
                width: $option-checkmark-width;
                height: 9px;
                position: absolute;
                right: 18px;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        .detail {
            color: $gray-60;
        }

        &[data-selected] .detail {
            color: $blue-50;
        }
    }
}

.grapher-dropdown-search {
    display: flex;
    align-items: center;
    margin: 4px;
    border: 1px solid $gray-20;
    border-radius: 4px;
    height: 32px;
}

.grapher-dropdown-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: 0;
    font: 400 13px/16px $sans-serif-font-stack;
    color: $dark-text;
    background: white;
    padding: 4px 6px;

    &:focus-visible {
        // Override global focus-visible style.
        outline: none;
    }
}

.grapher-dropdown-search-icon {
    $magnifying-glass: "";
    margin-left: 8px;
    width: 12px;
    height: 12px;
    background: url($magnifying-glass) no-repeat center;
}

.grapher-dropdown-search-reset {
    margin-right: 8px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: $gray-60;

    &:hover {
        color: $dark-text;
    }
}

.grapher-dropdown-search[data-empty] .grapher-dropdown-search-reset {
    visibility: hidden;
}
